// // 配置路由信息
import {Navigate } from "react-router-dom"
import React,{useState,lazy,Component } from "react"
import { JSX } from 'react/jsx-runtime'

// 懒加载模式需要使用loding
const Layout=lazy(()=>import("@/layout/index"))
const Home=lazy(()=>import("@/pages/home/index"))
const Page1=lazy(()=>import("@/pages/text/index"))
const Page404=lazy(()=>(import("@/pages/404/index")))

// 常用功能
const Gongneng=lazy(()=>import("@/pages/commonUse/index"))
const Svg=lazy(()=>import("@/pages/commonUse/svg/index"))
const Canvas=lazy(()=>import("@/pages/commonUse/canvas/index"))
// <Suspense>占位组件
/*当懒加载组件还没有加载出来的时候，先用占位组件显示。里面有一个属性fallback，
里面传进去的组件就是占位组件。有<Suspense>表示该组件懒加载出来的，决定是否懒加载出来的看是不是React.lazy().*/
const withLoading=(somp:JSX.Element)=>(
    <React.Suspense fallback={<div>Loding</div>}>
           {somp}
        </React.Suspense>
)

interface rout{
    path:string,
    element:Component,
    label:"",
    children?:Array<any>
}
export interface routerInterfase extends rout{}
const RourterData:Array<any>=[
    {
        path: '/',
        element:<Navigate to='/home'></Navigate>, //路由重定，默认会跳转到/home路由下
        label:"首页",
        meta:{
            title:"首页"
        }
    },
    {
        path: '/',
        element:<Layout></Layout>,
        label:"首页",
        meta:{
            title:"首页"
        },
        children:[
            {
                path:'/home',
                element:withLoading(<Home></Home>),
                label:"首页",
                meta:{
                    title:"首页"
                }
            },
            {
                path:'/gongneng',
                element:withLoading(<Gongneng></Gongneng>),
                label:"常用功能",
                meta:{
                    title:"常用功能"
                },
                children:[
                    {
                        path:'/gongneng/svg',
                        element:withLoading(<Svg></Svg>),
                        label:"svg",
                        meta:{
                            title:"svg"
                        }
                    },
                    {
                        path:'/gongneng/canvas',
                        element:withLoading(<Canvas></Canvas>),
                        label:"canvas",
                        meta:{
                            title:"canvas"
                        }
                    }
                ]
            },{
                path:'/commpont',
                element:withLoading(<Page1></Page1>),
                meta:{
                    title:"首页"
                },
                label:"常用组件",
                children:[
                    {
                        path:'/commpont/svg',
                        element:withLoading(<Page1></Page1>),
                        label:"svg",
                        meta:{
                            title:"首页"
                        }
                    },
                    {
                        path:'/commpont/canvas',
                        element:withLoading(<Page1></Page1>),
                        label:"canvas",
                        meta:{
                            title:"首页"
                        }
                    }
                ]
            }
        ]
    },
    {
        path: '*',
        element:<Page404></Page404>,
        label:"404"
    },
]
// 将路由配置数组转换为Route组件
// const renderRoutes = () => RourterData.map((route:any, index:any) => (
//     <Route 
//       key={index}
//       path={route.path}
//       element={route.element}
     
//     ></Route>
//   ));
//   const renderRoutes =useRoutes(RourterData)
  export default RourterData;
  